<template>
	<view>
		<view class="components-posts">
			</br>
			<view class="cu-card article" v-for="(item, index) in dataList" :key="index" @click="goToPostsDetail(item.id)">
				<view class="cu-item shadow">
					<view class="title"><view class="text-cut">{{item.title}}</view></view>
					<view class="content">
						<image :src="item.imgUrl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">{{item.content}}</view>
							<!-- <view>
								<view class="cu-tag bg-red light sm round">正义天使</view>
								<view class="cu-tag bg-green light sm round">史诗</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar-footer></tabbar-footer>
	</view>
</template>

<script>
	import {
		getPostsList
	} from '@/api/posts/posts.js'
	import tabbarFooter from '../tabbar/tabbar-footer.vue'
	export default {
		data() {
			return {
				title: '素胚勾勒出青花，笔锋浓转淡',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				dataList: []
			}
		},
		components: {
			tabbarFooter
		},
		onLoad() {
			this.getAllNewList()
		},
		methods: {
			getAllNewList() {
				getPostsList().then(res => {
					this.dataList = res.data
				})
			},
			// 跳转帖子详情页面
			goToPostsDetail(id) {
				uni.navigateTo({
					url: '/pages/posts/comments?id=' + id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f2f5f9;
	}
	.text-content {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3; /* 显示的行数 */
		-webkit-box-orient: vertical;
	}
</style>